<template>
  <view class="c-tab" :class="{ active: props.value === modelVaule }" @tap="onChange">
    <template v-if="props.name">{{ props.name }}</template>
    <slot v-else></slot>
  </view>
</template>
<script setup>
import { anyType } from '@/hooks';
import { tabsKey } from '@/constants';
import { inject } from 'vue';
const props = defineProps({
  name: String,
  value: anyType()
});
const modelVaule = inject(tabsKey);

const onChange = () => {
  modelVaule.value = props.value;
};
</script>
<style lang="scss">
.c-tab {
  line-height: 80px;
  height: 80px;
  min-width: 130px;
  text-align: center;
  font-size: 26px;
  color: var(--color-gray);
  position: relative;
  &.active {
    color: var(--color-primary);
    font-weight: bold;
    &::before {
      content: '';
      display: block;
      position: absolute;
      width: 100%;
      height: 4px;
      border-radius: 4px;
      background-color: var(--color-primary);
      bottom: 0;
      left: 0;
    }
  }
}
</style>
